<template>
	<div class="aftersalelist">
		<van-nav-bar fixed left-text="返回" left-arrow :title="!isWeixin() ? '售后记录' : ''" @click-left="handleBack" />
		<div class="inner">
			<div class="pageLoading" v-if="pageLoading">
				<van-loading type="spinner" vertical>加载中...</van-loading>
			</div>
			<div class="have" v-if="!pageLoading && list.length">
				<van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
					<div class="have-item" v-for="(item, index) in list" :key="index">
						<div class="refund">
							<div class="clumns between">
								<div class="text">
									退款会员：{{ encryptPhoneNumber(item.phone) }}
								</div>
								<div class="text">
									退款金额：<span class="bluecolor">{{ item.price }}元</span>
								</div>
							</div>
							<div class="clumns">
								<div class="text">退款原因：{{ item.tuikuan || "-" }}</div>
							</div>
							<div class="clumns" v-if="item.tkliyou">
								<div class="text">拒绝退款理由：{{ item.tkliyou || "-" }}</div>
							</div>
							<div class="clumns">
								<div class="text">
									申请时间：
									{{item.addtime? dayjs.unix(item.addtime).format("YYYY-MM-DD HH:mm:ss"): " - "}}
								</div>
							</div>
							<div class="clumns">
								<div class="text">
									退款时间：
									{{item.updatetime? dayjs.unix(item.updatetime).format("YYYY-MM-DD HH:mm:ss"): " - "}}
								</div>
							</div>
						</div>
						<div class="item-top">
							<div class="clumns">
								<div class="text">转单信息：{{ item.title }}</div>
							</div>
							<div class="clumns">
								<div class="text">转单需求：{{ item.content || "-" }}</div>
							</div>
							<div class="clumns">
								<div class="text">
									转单时间：
									{{
                    item.fbaddtime
                      ? dayjs.unix(item.fbaddtime).format("YYYY-MM-DD HH:mm:ss")
                      : " - "
                  }}
								</div>
							</div>
							<div class="clumns">
								<div class="text w-50">客户姓名：{{ item.name }}</div>
								<div class="text w-50">
									客户电话：<span class="bluecolor">{{
                    item.khphone || "-"
                  }}</span>
								</div>
							</div>
						</div>
						<div class="item-footer">
							<div class="action">
								<van-space v-if="item.status === 3">
									<van-button type="primary" size="small"
										@click="handleCheck(1, item)">同意退款</van-button>
									<van-button color="#f60" size="small"
										@click="handleCheck(2, item)">拒绝退款</van-button>
								</van-space>
								<div v-else class="">
									<span v-if="item.status === 4">已退款</span>
									<span v-if="item.status === 5">已拒绝</span>
								</div>
							</div>
						</div>
					</div>
				</van-list>
			</div>
			<div class="none" v-if="!pageLoading && !list.length">
				<van-empty description="暂无记录" />
			</div>
		</div>
	</div>
</template>
<script setup lang="ts">
	import dayjs from "dayjs";
	import { getCookie, encryptPhoneNumber } from "@/utils/index";
	import { ref, reactive } from "vue";
	import { useRouter } from "vue-router";
	import { isWeixin } from "@/utils/index";
	import { procureordertkApi, procuretkshApi } from "@/api/user";
	import { showConfirmDialog, showLoadingToast } from "vant";
	const router = useRouter();
	const list = ref();
	const pageLoading = ref(false);
	const finished = ref(false);
	const loading = ref(false);
	const pagination = reactive({
		pageNo: 1,
		pageSize: 10,
	});
	const handleBack = () => {
		if (history.state?.back) {
			router.back();
		} else {
			router.push("/user");
		}
	};
	const getList = async () => {
		pageLoading.value = true;
		let { data } = await procureordertkApi({
			uid: getCookie("token") ? Number(getCookie("token")) : "",
			pageNo: pagination.pageNo,
			pageSize: pagination.pageSize,
		});
		list.value = data.data || [];
		if (data.totalPage === 1) {
			finished.value = true;
		}
		pageLoading.value = false;
	};
	getList();
	const onLoad = async () => {
		pagination.pageNo++;
		let { data } = await procureordertkApi({
			uid: getCookie("token") ? Number(getCookie("token")) : "",
			pageNo: pagination.pageNo,
			pageSize: pagination.pageSize,
		});
		loading.value = false;
		list.value = [...list.value, ...data.data];
		if (pagination.pageNo >= data.totalPage) {
			finished.value = true;
		}
	};

	const handleCheck = async (data : number, info : any) => {
		showConfirmDialog({
			title: "提示",
			message: data === 1 ? "确定退款吗？" : "确定拒绝退款吗？",
		})
			.then(() => {
				// on confirm
				let toast = showLoadingToast({
					message: "请稍等...",
					forbidClick: true,
					duration: 0,
				});
				procuretkshApi({ procureorderid: info.id, state: data })
					.then(() => {
						toast.close();
						getList();
					})
					.catch(() => {
						toast.close();
					});
			})
			.catch(() => {
				// on cancel
			});
	};
</script>
<style lang="scss" scoped>
	@import "./index.scss";
</style>